<template>
  <div class="nav_container" v-if="uStore.flag != 'no'">
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item v-for="(item, index) in icon" :key="index" :to="item.path">
        <template #icon="props">
          <img :src="props.active ? item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup name='Nav'>
import { reactive, ref, onMounted, defineEmits, defineProps, defineExpose } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import one from '@/assets/images/nav/one.png'
import two from '@/assets/images/nav/two.png'
import three from '@/assets/images/nav/three.png'
import four from '@/assets/images/nav/four.png'
import five from '@/assets/images/nav/five.png'
import oneed from '@/assets/images/nav/oneed.png'
import twoed from '@/assets/images/nav/twoed.png'
import threeed from '@/assets/images/nav/threeed.png'
import foured from '@/assets/images/nav/foured.png'
import fiveed from '@/assets/images/nav/fiveed.png'
import { navStore, userStore } from '@/store'
// 初始化仓库
const store = navStore()
const uStore = userStore()
console.log(uStore, 'uStore');


// 变量区
const router = useRouter()
const route = useRoute()
const active = ref(0)
const icon = [
  {
    inactive: one,
    active: oneed,
    path: '/'
  },
  {
    inactive: two,
    active: twoed,
    path: '/market'
  },
  {
    inactive: three,
    active: threeed,
    path: '/earnInterest'
  },
  {
    inactive: four,
    active: foured,
    path: '/poofStake'
  },
  {
    inactive: five,
    active: fiveed,
    path: '/user'
  }
]


// 代码区

// 切换导航
const onChange = (event) => {
  active.value = event
  store.SET_NAV_DATA(event)
}

onMounted(() => {
  active.value = store.nav

})

// 将组件中的数据进行暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
.nav_container {
  margin-top: 240px;
}
</style>